<template>
  <PageMain :force-title="forceTitle" :before-back="titleBeforeBack">
    <template #header>
      <CommonStep :current="step" changeable @change="handlerStepChange">
        <a-step>项目基础信息</a-step>
        <a-step>人员信息</a-step>
      </CommonStep>
    </template>
    <template #body>
      <div
        class="layout resource-save w-full h-full overflow-hidden overflow-y-auto box-border bg-white p-0"
        ref="RefLayout"
      >
        <Step1Box
          v-model:form-data="formData"
          @next-step="toStep2"
          @quit="$router.push({ name: 'projectIndex' })"
          v-if="step == 1"
          ref="RefStep1Box"
        />
        <Step2Box
          v-model:form-data="formData"
          @submit="submitData"
          @to-prev="titleBeforeBack"
          v-if="step === 2"
        />
      </div>
    </template>
  </PageMain>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import Step1Box from '@/views/asset_management/resource-project/ProjectAdd/components/SaveStep1.vue';
import Step2Box from '@/views/asset_management/resource-project/ProjectAdd/components/SaveStep2.vue';
import { addProject, getDetail, onUpdate } from '@/api/assetManagement/resource_project/index';
const router = useRouter();
const route = useRoute();
const RefLayout = ref();
const step = ref(1);
const formData = ref({});
const forceTitle = computed(() => {
  return step.value === 1 ? '' : '人员信息';
});
const RefStep1Box = ref();

function titleBeforeBack() {
  if (step.value === 1) {
    return true;
  }
  step.value = 1;
  return false;
}

function handlerStepChange(num: number) {
  if (num === 1) {
    step.value = num;
    return;
  }
  if (!RefStep1Box.value) {
    return;
  }
  RefStep1Box.value.next(() => {
    step.value = num;
  });
}

// 下一步
function toStep2(data: any) {
  formData.value = data;
  step.value = 2;
}

// 提交
const submitData = async (data: any) => {
  const { id } = data;
  // formData.value;
  if (route.name === 'ProjectAdd' && !id) {
    try {
      let res = await addProject(data);
      if (res.code == '00000') {
        Message.success('添加成功');
        return router.push({
          name: 'projectIndex'
        });
      } else {
        Message.error(res.message);
      }
    } catch (err) {
      console.log(err);
    }
  }
  if (route.name === 'ProjectEdit' && id) {
    try {
      let res = await onUpdate(data);
      if (res.code == '00000') {
        Message.success('更新成功');
        return router.push({
          name: 'projectIndex'
        });
      } else {
        Message.error(res.message);
      }
    } catch (err) {
      console.log(err);
    }
  }
};

const getDataInfo = async (id: string | number) => {
  if (!id) return;
  try {
    let res = await getDetail(id as string);
    if (res.code === '00000') {
      formData.value = res.data;
      formData.value.dateRange = [
        formData.value.begin_time.substring(0, 10),
        formData.value.end_time.substring(0, 10)
      ];
      return;
    }
  } catch (e) {
    console.log(e);
  }
};

onMounted(() => {
  const { name } = route;
  if (name === 'resourceadd') {
    // ..
  }
  if (name === 'ProjectEdit') {
    const { id } = route.query;
    const { type } = route.query;
    if (!id) {
      Message.warning('参数错误, 无法初始化数据');
      router.push({ name: 'projectIndex' });
      return;
    }
    if (type) {
      step.value = 2;
    }
    getDataInfo(id as string);
  }
});
</script>

<style lang="less" scoped>
.resource-save {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title-box {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    color: #394d73;
  }
  .content-box {
    flex: 1;
    .arco-form {
      .arco-row {
        margin-bottom: 20px;
        .arco-col {
          height: 100%;
          overflow: hidden;
          box-sizing: border-box;
          .arco-form-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            :deep(.arco-form-item-label-col) {
              width: 100%;
              padding: 0;
              box-sizing: border-box;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
          }
          .exception {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            margin-top: 32px;
            :deep(.arco-form-item-label-col) {
              width: auto;
              padding-right: 20px;
              box-sizing: border-box;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
            :deep(.arco-form-item-wrapper-col) {
              flex: 1;
            }
          }
        }
      }
    }
  }
  .footer-box {
    box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  }
}
</style>
